<template>
  <div class="my-data-all">
    <el-row type="flex" style="justify-content: flex-start">
      <el-col v-if="totalOptions" class="data-preview-box">
        <data-preview :options="totalOptions"></data-preview>
      </el-col>
      <el-col class="data-preview-box">
        <data-preview :options="uvOptions"></data-preview>
      </el-col>
      <el-col class="data-preview-box">
        <data-preview :options="pvOptions"></data-preview>
      </el-col>
      <el-col class="data-preview-box">
        <data-preview :options="shareOptions"></data-preview>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import DataPreview from "./data-preview.vue";
const props = defineProps<{
  navPrev: IWebMyNavPrev | object;
}>();
const totalOptions = computed(() => {
  let navPrev = props.navPrev as IWebMyNavPrev;
  if (!navPrev || isNaN(navPrev.num)) return null;
  let num = navPrev && navPrev.num ? navPrev.num : 0;
  return {
    style: "pre-blue",
    num: num > 10000 ? num / 10000 + "万" : num,
    title: "总作品量",
    time: navPrev && navPrev.time ? navPrev.time : "",
    icon: "jy-icon-amount",
  };
});
const uvOptions = computed(() => {
  let navPrev = props.navPrev as IWebMyNavPrev;
  let uv = navPrev && navPrev.uv ? navPrev.uv : 0;
  return {
    style: "pre-light-green",
    num: uv > 10000 ? (uv as number) / 10000 + "万" : uv,
    title: "总访客数 UV",
    time: navPrev && navPrev.time ? navPrev.time : "",
    icon: "jy-icon-visitors",
  };
});

const pvOptions = computed(() => {
  let navPrev = props.navPrev as IWebMyNavPrev;
  let pv = navPrev && navPrev.pv ? navPrev.pv : 0;
  return {
    style: "pre-light-blue",
    num: pv > 10000 ? (pv as number) / 10000 + "万" : pv,
    title: "总浏览量 PV",
    time: navPrev && navPrev.time ? navPrev.time : "",
    icon: "jy-icon-views",
  };
});
const shareOptions = computed(() => {
  let navPrev = props.navPrev as IWebMyNavPrev;
  let shareNum =
    navPrev && navPrev.wb && !isNaN(navPrev.wb) && navPrev.wx && !isNaN(navPrev.wx)
      ? navPrev.wb + navPrev.wx
      : 0;
  return {
    style: "pre-pink",
    num: shareNum > 10000 ? shareNum / 10000 + "万" : shareNum,
    title: "总分享量",
    time: navPrev && navPrev.time ? navPrev.time : "",
    icon: "jy-icon-share",
  };
});
</script>
